<template>
  <div class="returnDetail">
    <el-card shadow="nerve">
      <div class="main_body">
        <!-- 订单信息 -->
        <div class="order-info">
          <div class="title">
            <h3>订单信息:</h3>
            <el-button v-if="productInfo.status == 0" type="danger" size="mini">
              待处理
            </el-button>
            <el-button
              v-else-if="productInfo.status == 1"
              type="warning"
              size="mini"
            >
              退货中
            </el-button>
            <el-button
              v-else-if="productInfo.status == 2"
              type="primary"
              plain
              size="mini"
            >
              已完成
            </el-button>
            <el-button
              v-else-if="productInfo.status == 3"
              type="success"
              size="mini"
            >
              已拒绝
            </el-button>
          </div>
          <div class="info">
            <div class="info-item">
              <span>订单编号:</span>{{ productInfo.orderSn }}
            </div>
            <div class="info-item">
              <span>退单人姓名:</span>{{ productInfo.memberUsername }}
            </div>
            <div class="info-item">
              <span>退单理由:</span>{{ productInfo.reason }}
            </div>
            <div class="info-item">
              <span>退单描述:</span>{{ productInfo.description }}
            </div>
            <div class="info-item">
              <span>申请时间:</span>{{ productInfo.createTime }}
            </div>
            <div class="info-item" style="width: auto">
              <span>退单图片:</span>
              <el-image
                v-for="item in productInfo.proofPics"
                :key="item"
                fit="fill"
                :src="item"
                style="width: 100px; height: 100px; margin: 0 10px"
              />
            </div>
          </div>
        </div>
        <!-- //用户信息 -->
        <div class="customer-info">
          <div class="title">
            <h3>用户信息:</h3>
          </div>
          <div class="info">
            <div class="info-item">
              <span>收货人:</span>{{ productInfo.receiverName }}
            </div>
            <div class="info-item">
              <span>用户姓名:</span>{{ productInfo.memberUsername }}
            </div>
            <div class="info-item">
              <span>手机号码:</span>{{ productInfo.receiverPhone }}
            </div>
            <div class="info-item">
              <span>邮政编码:</span>{{ productInfo.receiverPhone }}
            </div>
            <div class="info-item">
              <span>地址:</span>{{ productInfo.receiverProvince }}
              {{ productInfo.receiverCity }} {{ productInfo.receiverRegion }}
            </div>
            <div class="info-item">
              <span>详细地址:</span>{{ productInfo.receiverDetailAddress }}
            </div>
          </div>
        </div>
        <!-- 商品信息 -->
        <div class="goods-info">
          <div class="title">
            <h3>退货商品:</h3>
          </div>
          <el-table :data="goodsInfo" border style="width: 100%">
            <el-table-column
              label="商品图片"
              width="180"
              align="center"
              prop="productPic"
            >
              <template slot-scope="scope">
                <div>
                  <el-image
                    style="width: 100px; height: 100px"
                    :src="scope.row.productPic"
                    fit="fill"
                    :lazy="true"
                  />
                </div>
              </template>
            </el-table-column>
            <el-table-column
              align="center"
              prop="productBrand"
              label="产品描述"
            >
              <template slot-scope="scope">
                <div>
                  <div>{{ scope.row.productName }}</div>
                  <div>{{ scope.row.productBrand }}</div>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="productPrice"
              label="商品价格"
              align="center"
            />
            <el-table-column align="center" label="商品属性">
              <template slot-scope="scope">
                <div>
                  <span
                    v-for="item in scope.row.productAttr"
                    :key="item.key"
                    style="padding-right: 5px"
                    >{{ item.key }}:{{ item.value }}</span
                  >
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="productCount"
              align="center"
              label="商品数量"
            />
            <el-table-column
              align="center"
              prop="productRealPrice"
              label="总计"
            />
          </el-table>
        </div>
        <!-- status为0 待处理  显示费用信息 填写处理信息,显示同意退货和拒绝退货按钮
             statue为1 退货中  显示费用信息,处理信息,填写收货信息 确认收货
             status为2 已完成  显示费用信息,处理信息,收货人信息,不显示按钮
             status为3 已拒绝  显示费用信息,处理信息 -->
        <!-- 费用信息 填写处理信息-->
        <div class="postage-info">
          <div class="title">
            <h3>费用信息:</h3>
          </div>
          <div class="info">
            <div class="info-item">
              <span>退单金额:</span
              >{{ productInfo.returnAmount ? productInfo.returnAmount : '0' }}
            </div>
            <div class="info-item"><span>运费金额:</span>0</div>
          </div>
          <!-- //填写处理信息 -->
          <el-form
            v-if="productInfo.status == 0"
            ref="handelInfo"
            :inline="true"
            :model="handelInfo"
            size="mini"
          >
            <el-form-item
              class="info-item"
              prop="handleMan"
              :rules="[
                {
                  required: true,
                  message: '请填写处理人员姓名',
                  trigger: 'blur'
                }
              ]"
              label="处理人"
            >
              <el-input v-model="handelInfo.handleMan" clearable />
            </el-form-item>
            <el-form-item
              prop="handleNote"
              label="处理备注"
              :rules="[
                { required: true, message: '请填写备注信息', trigger: 'blur' }
              ]"
              class="info-item"
            >
              <el-input v-model="handelInfo.handleNote" clearable />
            </el-form-item>
            <el-form-item
              prop="returnAmount"
              label="退单金额"
              :rules="[
                { required: true, message: '请填写退单金额', trigger: 'blur' }
              ]"
              class="info-item"
            >
              <el-input v-model.number="handelInfo.returnAmount" clearable />
            </el-form-item>
          </el-form>
        </div>
        <!-- 处理信息 填写收货信息-->
        <div v-if="productInfo.status !== 0" class="postage-info">
          <div class="title">
            <h3>处理结果:</h3>
          </div>
          <div class="info">
            <div class="info-item">
              <span>处理人:{{ productInfo.handleMan }}</span>
            </div>
            <div class="info-item">
              <span>处理备注:{{ productInfo.handleNote }}</span>
            </div>
            <div class="info-item">
              <span>处理时间:{{ productInfo.handleTime }}</span>
            </div>
          </div>
          <!--填写收货人和收货信息-->
          <el-form
            v-if="productInfo.status == 1"
            ref="receiveInfo"
            style="margin-top: 20px"
            :inline="true"
            :model="receiveInfo"
            size="mini"
          >
            <el-form-item
              class="info-item"
              prop="name"
              :rules="[
                { required: true, message: '请填写收货人姓名', trigger: 'blur' }
              ]"
              label="收货人"
            >
              <el-input v-model="receiveInfo.name" prop="note" clearable />
            </el-form-item>
            <el-form-item
              prop="note"
              label="收货备注"
              :rules="[
                { required: true, message: '请填写备注信息', trigger: 'blur' }
              ]"
              class="info-item"
            >
              <el-input v-model="receiveInfo.note" clearable />
            </el-form-item>
          </el-form>
        </div>
        <!-- 收货人信息 -->
        <div v-if="productInfo.status === 2" class="postage-info">
          <div class="title">
            <h3>收货人信息:</h3>
          </div>
          <div class="info">
            <div class="info-item">
              <span>退单收货人:{{ productInfo.receiveMan }}</span>
            </div>
            <div class="info-item">
              <span>退单收获备注:{{ productInfo.receiveNote }}</span>
            </div>
            <div class="info-item">
              <span>退单收货时间:{{ productInfo.receiveTime }}</span>
            </div>
          </div>
        </div>
        <!-- 控制按钮 -->
        <div class="btn">
          <el-button
            v-if="productInfo.status == 0"
            type="primary"
            @click="HandleAgree()"
            >同意退款</el-button
          >
          <el-button
            v-if="productInfo.status == 0"
            type="primary"
            @click="HandleReject()"
            >拒绝退款</el-button
          >
          <el-button
            v-if="productInfo.status == 1"
            type="primary"
            @click="handleReceive()"
            >确认收货</el-button
          >
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import {
  orderReturn,
  receiveProduct,
  agreeApply,
  rejectApply
} from '@/api/orders/returnList/index'
export default {
  data() {
    return {
      orderId: '',
      id: '',
      productInfo: {},
      receiveInfo: {
        note: '',
        name: ''
      },
      handelInfo: {
        handleMan: '',
        handleNote: '',
        returnAmount: ''
      },
      goodsInfo: []
    }
  },
  created() {
    this.orderId = this.$route.params.id
    this.init()
  },
  mounted() {},
  methods: {
    init() {
      orderReturn(this.orderId).then((res) => {
        this.id = res.data.orderReturnApply.id
        // 把规格转化为字符串
        res.data.orderReturnApply.productAttr = JSON.parse(
          res.data.orderReturnApply.productAttr
        )
        this.productInfo = res.data.orderReturnApply
        this.productInfo.proofPics = this.productInfo.proofPics.split(',')
        console.log(this.productInfo.productAttr)
        // 生成商品数组,用于table表格
        var obj = {
          productPic: this.productInfo.productPic,
          productName: this.productInfo.productName,
          productPrice: this.productInfo.productPrice,
          productBrand: this.productInfo.productBrand,
          productAttr: this.productInfo.productAttr,
          productCount: this.productInfo.productCount,
          productRealPrice: this.productInfo.productRealPrice
        }
        this.goodsInfo.push(obj)
      })
    },
    // 同意退款
    HandleAgree() {
      this.$refs['handelInfo'].validate((valid) => {
        if (valid) {
          this.$confirm('确认退款?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              agreeApply(this.id, this.handelInfo).then((res) => {
                if (res.success) {
                  this.$message.success('退款成功')
                  this.init()
                } else {
                  this.$message.error(res.message)
                }
              })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消退款'
              })
            })
        } else {
          this.$message.error('处理信息填写不正确!')
          return false
        }
      })
    }, //   //验证处理信息
    // 确认收货  //验证收获信息
    handleReceive() {
      this.$refs['receiveInfo'].validate((valid) => {
        if (valid) {
          this.$confirm('确认收货?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              receiveProduct(this.id, this.receiveInfo).then((res) => {
                if (res.success) {
                  this.$message.success('收货成功')
                  this.init()
                } else {
                  this.$message.error(res.message)
                }
              })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消收货'
              })
            })
        } else {
          this.$message.error('收货信息填写不正确!')
          return false
        }
      })
    }, //
    // 拒绝退款
    HandleReject() {
      // 验证收货信息
      this.$refs['handelInfo'].validate((valid) => {
        if (valid) {
          this.$confirm('是否拒绝退款?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          })
            .then(() => {
              rejectApply(this.id, this.handelInfo).then((res) => {
                if (res.success) {
                  this.$message.success('退款成功')
                  this.init()
                } else {
                  this.$message.error(res.message)
                }
              })
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '已取消退款'
              })
            })
        } else {
          this.$message.error('处理信息信息填写不正确!')
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.returnDetail {
  .main_body {
    padding-bottom: 30px;
    .order-info,
    .order-info,
    .customer-info,
    .goods-info,
    .postage-info,
    .logistics-info {
      padding-bottom: 24px;
      border-bottom: 1px solid #dcdfe6;
      .title {
        h3 {
          display: inline-block;
          margin-right: 15px;
        }
        span {
          font-size: 18px;
          color: rgb(128, 128, 128);
          font-weight: bold;
        }
      }
      .info {
        display: flex;
        font-size: 14px;
        flex-wrap: wrap;
        .info-item {
          display: flex;
          align-items: center;
          width: 300px;
          line-height: 40px;
          span {
            padding-right: 10px;
          }
        }
      }
    }
    .postage-info {
      .info {
        .info-item {
          span {
            color: #000;
          }
          color: #f00;
        }
        .sendDone {
          display: flex;
        }
      }
      .el-form {
        margin-top: 10px;
        .el-form-item {
          width: 300px;
        }
      }
    }
    .btn {
      display: flex;
      justify-content: center;
      align-items: item;
      .el-button {
        display: block;
        margin: 30px 20px;
      }
    }
  }
}
</style>
